<template>
  <div>
    <Headline :headline1="$t('m.FaceRecognition')+'  /  '" :headline2="$t('m.PermissionGroupManagement')" />
    <a-card style="width: 100%">
      <a-input-search
          style="width: 200px; margin-right: 15px"
          :placeholder="$t('m.PleaseEnterYourSearchTerms')"
          enter-button
          v-model="forminitial.key"
          @search="onSearch"
      />
      <a-button
          type="primary"
          @click="add"
          icon="plus"
          style="margin-right: 15px"
          v-if="isTrue('face:group:add')"
      >
        {{$t('m.Add')}}
      </a-button>

      <a-table
          size="small"
          style="margin-top: 30px"
          :columns="columns"
          :rowKey="(record, i) => i"
          :data-source="data"
          :pagination="false"
          bordered
      >
        <div slot="handle" slot-scope="text, tags, i">
          <a-button style="margin-left: 15px;"
                    :disabled="!isTrue('face:group:update')"
                    type="primary" @click="edit(text, tags, i)">{{$t('m.Modification')}}</a-button>
          <a-button style="margin-left: 15px;"
                    :disabled="!isTrue('face:group:delete')"
                    type="danger" @click="del(text, tags, i)">{{$t('m.Delete')}}</a-button>
        </div>
      </a-table>
      <a-pagination
          style="margin-top: 10px"
          show-size-changer
          :default-current="1"
          :total="total"
          @change="Pages"
          :pageSizeOptions="['5', '10', '30', '40']"
          @showSizeChange="onShowSizeChange"
          class="pages"
      />
    </a-card>
    <a-form :form="form">
      <a-modal
          :title="$t('m.SettingPermissionGroup')"
          :visible="visible"
          :cancelText="$t('m.Cancel')"
          :okText="$t('m.Ok')"
          @cancel="handleCancel"
          @ok="handleOk"
          class="lowg"
          style="text-align:center;">
         <a-form-item >
        {{$t('m.PermissionGroupName')}}
        <a-input
            v-decorator="['groupName',{ rules: [{ required: true, message: '请输入权限组名称' }] },]"
            type="text"
            v-model="forminitialA.groupName"
            style="width: 300px"
        />
         </a-form-item>
        <div style="margin-top: 20px ; margin-left: 30px;">
          {{$t('m.WeekPlan')}} :
          <a-select style="width: 297px" v-model="forminitialA.weekPlanId">
            <a-select-option
                :key="item.planId"
                :value="item.planId"
                v-for="item in weekPlan"
            >{{ item.planName }}</a-select-option>
          </a-select>
        </div>
      </a-modal>
    </a-form>
    <Delete ref="delOk" :dalete="dalete" @confirm="delisOk" />
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import Delete from "@/components/Delete";
import {
  getAuthGroupList,
  delAuthGroup,
  getWeekPlanList,
  saveAuthGroup,
} from "@/api/faceRecognition";
import {Setperms} from '@/assets/js/setperms'
export default {
  name: "Administration",
  components: { Headline, Delete },
  data() {

    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
      checkNick: false,
      flag:true,
      forminitial: {
        start: 0,
        limit: 10,
        key: "",
        page: 1,
      },
      dalete:{
        titles:this.$t('m.DeleteThePrompt'),
        type:'exclamation-point',
        text:this.$t('m.AreYouSureToDeleteThisData')
      },
      data: [],

      columns: [
        { title: this.$t('m.PermissionGroupNumber'), dataIndex: "groupIndex" },
        { title: this.$t('m.PermissionGroupName'), dataIndex: "groupName" },
        { title: this.$t('m.WeekPlanName'), dataIndex: "planName" },
        {
          title: this.$t('m.Operation'),
          scopedSlots: { customRender: "handle" },
        },
      ],
      total: 0,
      visible: false,

      groupId: "",
      weekPlan: [],
      forminitialA: {
        groupName: "",
        weekPlanId: 1,
        groupId:'',
        // groupIndex:''
      },
      defaultSelect:'12'
    };
  },
  created() {
    this.getGroupList();
    this.parms = Setperms(this.$route.fullPath,JSON.parse(sessionStorage.getItem('menu')))
    console.log(this.parms)

  },
  methods: {
    isTrue(str){
      return this.parms.indexOf(str) !== -1;
    },
    handleOk() {
      this.form.validateFields(err => {
        if (!err) {
          this.form.resetFields();
          console.info('success');
        }
      });
      if(this.forminitialA.groupName != ""){
        if(this.flag == true) {
          this.forminitialA.groupId = 0
          saveAuthGroup(JSON.parse(JSON.stringify(this.forminitialA)))
              .then(res => {
                if(res.data.success == true) {
                  this.getGroupList()
                  this.$message.success(res.data.msg)
                }
                if(res.data.success == false) {
                  this.$message.warning(res.data.msg)
                }
              })
              .catch(err => {
                this.$message.error('操作失败')
              })
        } else {
          saveAuthGroup(JSON.parse(JSON.stringify(this.forminitialA)))
              .then(res => {
                if(res.data.success == true) {
                  this.getGroupList()
                  this.$message.success(res.data.msg)
                }
                if(res.data.success == false) {
                  this.$message.warning(res.data.msg)
                }
              })
              .catch(err => {
                this.$message.error('操作失败')
              })
        }

        this.forminitialA.groupName = ''
        this.forminitialA.groupId = ''
        // this.forminitialA.groupIndex = ''
        this.forminitialA.weekPlanId = 12
        this.visible = false
      }
    },
    delisOk() {
      delAuthGroup({ groupId: this.groupId })
          .then((res) => {
            if (res.data.success == true) {
              this.getGroupList()
              this.$message.success("删除成功");
            }
            if (res.data.success == false) {
              this.$message.warning(res.data.msg);
            }
          })
          .catch((err) => {
            this.$message.success("操作失败");
          });
      this.$refs.delOk.visible = false;
    },
    edit(text, tags, i) {
      this.flag = false
      this._getWeekPlanList()
      this.visible = true
      this.forminitialA.groupName = tags.groupName
      // this.forminitialA.groupIndex = tags.groupIndex
      this.forminitialA.groupId = tags.groupId
      console.log(tags)
      this.forminitialA.weekPlanId = tags.planName
    },
    del(text, tags, i) {
      this.$refs.delOk.visible = true;
      console.log(tags);
      this.groupId = tags.groupId;
    },
    handleCancel() {
      this.visible = false;
      this.form.resetFields();
      this.forminitialA.groupName = ''
      this.forminitialA.weekPlanId = ''

    },
    _getWeekPlanList(){
      getWeekPlanList({ params: { start: 0, limit: 1000, page: 1 } })
          .then((res) => {
            this.weekPlan = res.data.data;
            this.defaultSelect = res.data.data[0].planId
            console.log(this.defaultSelect)
            console.log(res.data.data);
          })
          .catch((err) => {
            console.log(err);
          });
    },
    add() {
      this.form.validateFields(err => {
        if (!err) {
          this.form.resetFields();
          console.info('success');
        }
      });
      this.visible = true;
      this.flag = true
      this._getWeekPlanList()
    },
    onShowSizeChange(page, limit) {
      this.forminitial.page = page;
      this.forminitial.limit = limit;
      this.getAuthorList();
    },
    Pages(page, pageSize) {
      this.forminitial.limit = pageSize;
      this.forminitial.page = page;
      this.forminitial.start = (page - 1) * pageSize;
      this.getAuthorList();
    },
    onSearch() {
      this.getGroupList();
    },
    getGroupList() {
      getAuthGroupList({ params: this.forminitial })
          .then((res) => {
            this.data = res.data.data;
            this.total = res.data.total;
            console.log(res.data.data);
          })
          .catch((err) => {
            console.log(err);
          });
    },
  }
};
</script>

<style scoped lang="scss">
/deep/ .lowg .ant-modal-body {
  text-align: center;
}
</style>
